<template>
  <div class=''>
    baohuo.vue

    <!-- <input v-model="title" type="text" /> -->
    <!-- 基本 -->
    <button @click="change">变化</button>
    <keep-alive>
      <component :is="view"></component>
    </keep-alive>

    <!-- 多个条件判断的子组件 -->
    <!-- <keep-alive>
        <comp-a v-if="a > 1"></comp-a>
        <comp-b v-else></comp-b>
    </keep-alive> -->

    <!-- 和 `<transition>` 一起使用 -->
    <!-- <transition>
        <keep-alive>
            <component :is="view"></component>
        </keep-alive>
    </transition> -->


  </div>
</template>

<script lang='ts'>
import {defineComponent} from 'vue'
import winputVue from '../components/winput.vue'
import yinputVue from '../components/yinput.vue'

export default defineComponent({
  name: 'baohuo',
  components: {
    winputVue, yinputVue
  },
  data() {
    return {
      value: "",
      title: "标题",
      view: "winputVue",
    }
  },
  methods: {
    change() {
      this.view = this.view == "winputVue" ? "yinputVue" : "winputVue"
    }
  }

})
</script>

<style scoped>
</style>
